<template>
	<view class="box">
		<uNavbar title="" bgColor="transparent"></uNavbar>
		<view class="main">
			<image class="headimg" :src="avatar" mode="aspectFill"></image>
			<view class="info">
				<text class="name">{{nickname}}</text><text>{{phone}}</text>
			</view>
			<!-- 	<view class="usernum">
				用户编号：13141512523653246
			</view> -->
			<view class="code">
				<image :src="list.img" mode=""></image>
			</view>
			<view class="invite">
				邀请码:{{list.invite_code}}
				<image src="/static/icon/copy.png" @click="copyCode" mode="aspectFill"></image>
			</view>
			<!-- <view class="doLoad flex_c" @click="saveimg">
				<text>下载</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		share
	} from "../../api/other.js"
	import {
		getuserinfo
	} from "../../api/index.js"
	export default {
		data() {
			return {
				list: {},
				phone: "",
				avatar: '',
				nickname: ''
			}
		},
		onLoad() {
			this.getlist()
			this.getuser()
		},
		methods: {
			getlist() {
				share().then(res => {
					if (res.code == 1) {
						this.list = res.data
					}

					console.log(this.list)
				})
			},
			// 用户信息
			getuser() {
				getuserinfo().then(res => {
					if (res.code == 1) {
						this.phone = res.data.phone_format
						this.avatar = res.data.head_img
						this.nickname = res.data.nickname
					}
				})
			},
			// 复制
			copyCode() {
				uni.setClipboardData({
					data: this.list.invite_code,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			},
			saveimg() {
				console.log(111111111,this.list.img);
				let that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.list.img,
					success: function() {
						console.log('save success');
						uni.showToast({
							title: '保存成功'
						});
					},
					fail(e) {
						console.log(22222,e);
						uni.hideLoading();
						uni.showToast({
							title: '保存失败',
							icon: "none"
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #211E38;
		position: relative;
		background: url(../../static/image/yqhybg.png) repeat fixed center;
	}

	.main {
		width: 610rpx;
		// height: 892rpx;
		background: #373465;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: absolute;
		top: 300rpx;
		left: 70rpx;
		padding-bottom: 20rpx;

		.headimg {
			width: 144rpx;
			height: 144rpx;
			position: absolute;
			top: -50rpx;
			border-radius: 50%;
			left: 233rpx;
		}

		.info {
			width: 610rpx;
			// display: flex;
			text-align: center;
			margin: 0 auto;
			margin-top: 146rpx;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;

			/* 显示省略号 */
			.name {
				font-weight: 700;
				font-size: 32rpx;
				color: #FFFFFF;
				font-family: iconfont;
			}

			>text {
				font-weight: 400;
				font-size: 28rpx;
				color: #A6A5AF;
			}
		}

		.usernum {
			width: 610rpx;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #A6A5AF;
			margin-top: 30rpx;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 显示省略号 */

		}

		.code {
			width: 484rpx;
			height: 484rpx;
			background: #FFFFFF;
			margin: 0 auto;
			margin-top: 50rpx;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			>image {
				width: 484rpx;
				height: 482rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
		}

		.invite {
			width: 610rpx;
			text-align: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #A6A5AF;
			margin-top: 30rpx;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;

		}

		.invite>image {
			width: 24rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}

	.doLoad {
		width: 92%;
		margin: 30rpx auto 0;
		padding-bottom: 30rpx;
	}

	.doLoad>text {
		padding: 14rpx 80rpx;
		border-radius: 40rpx;
		background: skyblue;
		color: #ffffff;
		background: linear-gradient(270deg, #E62AE2 0%, #1216FD 100%);
	}
</style>